<script setup>
import { ref, computed } from 'vue'

// 原始数据
const gooseRecords = ref([
  { date: '2025-03-08 10:09:33', id: '10008924', worker: '糖醋', age: '10天', temperature: '37.5°C', weight: '2.5kg', sex: '公', vaccineStatus: '已接种' },
  { date: '2025-03-09 14:20:15', id: '10008925', worker: '红烧', age: '12天', temperature: '37.8°C', weight: '2.6kg', sex: '母', vaccineStatus: '未接种' },
  { date: '2025-03-07 16:45:09', id: '10008926', worker: '清蒸', age: '8天', temperature: '37.2°C', weight: '2.4kg', sex: '公', vaccineStatus: '已接种' }
]);	

// 搜索功能
const searchText = ref('')
const showNoData = ref(false) //没有数据时处理页面
// 修改弹层显示控制方式
const popup = ref(null)

// 过滤后的数据
const filteredRecords = computed(() => {
  return gooseRecords.value.filter(item => 
    item.id.includes(searchText.value.trim())//去除字符串两端的空白字符
  )
})

// 搜索处理
const handleSearch = () => {
  showNoData.value = filteredRecords.value.length === 0
}

// 清空搜索
const handleClear = () => {
  searchText.value = ''
  showNoData.value = false
}

//定义弹层组件的显示
const show = ref(false);
const selectedItem = ref({});

const showDetail = (item) => {
	show.value=true
  selectedItem.value = item
  popup.value.open('center') // 使用组件方法打开弹窗
}

const closePopup = () => {
  popup.value.close()/// 正确关闭方式
  show.value=false
}

</script>

<template>
  <view class="info-list">
    <!-- 搜索框 -->
    <view class="info-list__search" v-show="!show">
      <uni-search-bar 
        class="info-list__search--search-bar" 
        v-model="searchText"
        color="#999999"  
        placeholder="请输入种鹅编号" 
        bgColor="#FFFFFF"
        @confirm="handleSearch"
        @clear="handleClear"
        @input="handleSearch"
      ></uni-search-bar>
    </view>

    <!-- 数据列表 -->
    <view class="info-list__datalist" v-show="!show">
      <!-- 搜索结果 -->
      <template v-if="filteredRecords.length > 0">
        <view 
          v-for="(item, index) in filteredRecords" 
          :key="index"
          class="card-item"
		  @click="showDetail(item)"
        >
          <uni-card 
            title="记录时间" 
            :extra="item.date" 
            class="info-list__datalist--card"
          >
            <view class="goose-id">
              <text>幼鹅编号:</text>
              <text class="highlight">{{ item.id }}</text>
            </view>
            <view class="worker-name">
              <text>记录人:</text>
              <text>{{ item.worker }}</text>
            </view>
          </uni-card>
        </view>
      </template>

      <!-- 无数据提示 -->
      <view v-else class="no-data" v-show="showNoData">
        <image src="/static/assets/recode/空状态.png" class="empty-img" />
        <text class="empty-text">未找到相关记录</text>
      </view>
    </view>
  
      <!-- 弹层组件 @maskClick="closePopup"添加遮罩层点击关闭 -->
  <uni-popup 
    ref="popup" 
    :is-mask-click="true" 
    type="center" 
    :show="show"
    @maskClick="closePopup"
  >
    <view class="popup-content">
      <text class="popup-title">每日上报记录</text>
      <view class="detail-item">
        <text class="label">幼鹅编号:</text>
        <text>{{ selectedItem.id }}</text>
      </view>
      <view class="detail-item">
        <text class="label">日龄:</text>
        <text>{{ selectedItem.age }}</text>
      </view>
      <view class="detail-item">
        <text class="label">体温:</text>
        <text>{{ selectedItem.temperature }}</text>
      </view>
      <view class="detail-item">
        <text class="label">体重:</text>
        <text>{{ selectedItem.weight }}</text>
      </view>
      <view class="detail-item">
        <text class="label">性别:</text>
        <text>{{ selectedItem.sex }}</text>
      </view>
      <view class="detail-item">
        <text class="label">疫苗接种状态:</text>
        <text>{{ selectedItem.vaccineStatus }}</text>
      </view>
	  <view class="detail-item">
	    <text class="label">记录时间:</text>
	    <text>{{ selectedItem.date }}</text>
	  </view>
      <button class="close-btn" @click="closePopup">关闭</button>
    </view>
  </uni-popup>
  
  </view>
</template>

<style scoped lang="scss">
// ::v-deep是Vue中的深度选择器，用于穿透scoped样式作用域。
.info-list {
  padding: 10rpx;
  // &__ 是 SCSS（Sass的一种语法）中的一个嵌套规则，用于生成基于父选择器的子选择器。
  &__datalist {
    .card-item {
      margin-bottom: 20rpx;
      // &: 可以用于各种伪类和伪元素，例如：
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .highlight {
      color: #007AFF;
      font-weight: bold;
    }
    
    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 100rpx 0;
      
      .empty-img {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
      }
      
      .empty-text {
        color: #999;
        font-size: 28rpx;
      }
    }
  }
  
  &__datalist--card {
    .goose-id,
    .worker-name {
      display: flex;
      font-size: $uni-font-size-lg;
      font-weight: 500;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
    }
  }
}
  /* 弹层的整体样式 */
  .popup-content {
    margin: 30rpx;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  
  /* 弹层标题样式 */
  .popup-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }
  
  /* 每个详情项的容器 */
  .detail-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
  }
  
  /* 标签文字的样式 */
  .label {
    font-size: 16px;
    color: #333;
  }
  
  /* 关闭按钮样式 */
  .close-btn {
    background-color: #80b7f9;
    color: white;
    padding: 8rpx 150rpx 8rpx 150rpx; 
    border: none;
    border-radius: 5px;
    align-self: center;
    cursor: pointer;
    font-size: 16px;
  }
</style>